
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>便民服务-话费充值</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">		
	</head>
	<style type="text/css">
	   body{overflow-y: auto; background-color: #f4f4f4;}		
	   .mui-content{background-color: #f4f4f4;}	
	   .mui-content .bill>h3{color: #666; height: .8rem; line-height: .8rem; background-color: #ffffff; font-size: .32rem; padding-left: .3rem; box-sizing: border-box; margin: 0;}
	   .mui-content .bill>.phone_number{background-color: #f4f4f4;}	
	   .bill .ico_card{display: inline-block; vertical-align: middle; margin:0 .1rem 0 0; width: .48rem; height: .48rem; background: url(../../../images/service/s_ico13.png) no-repeat; background-size:cover;}	
	   .mui-input-group .mui-input-row:after,.mui-input-group:before,.mui-input-group:after{background: none;}
	   .mui-input-group .mui-input-row{padding: .2rem 0; height: auto;}
	   input[type=text]{padding: .2rem .3rem;font-size: .3rem}
	   .mobile_yy{padding:0 .3rem; font-size: .3rem}
	   .bill .money{ width: 100%; margin-top: .5rem; box-sizing: border-box;}
	   .bill .money ul li{width: 2rem; height: 1rem; line-height: 1rem; color: #16a3fc; font-size: .3rem; border: 1px solid #16a3fc; text-align: center;float: left; margin:0 0 .3rem .4rem;}
	   .bill .money ul{margin: 0; padding: 0;}
	   .bill .money ul li.active{background-color: #16a3fc; color: #fff; border: 1px solid #16a3fc;}	
	   .mui-input-row>.mui-input-clear~.mui-icon-clear{top: 17px;}	
	   .mui-btn.disabled{background-color: #ccc;}	
	   .mui-btn.enabled{background-color: #ff7800;color: #fff;border: 1px solid #ff7800;}  
	</style>
	<body>
		<!-- 主体start -->
		<div class="mui-content">
			<div class="bill">
			   <h3 class="bill_txt"><i class="ico_card"></i>话费</h3>	
			   <h3 class="phone_number">手机号码</h3>	
			   <div class="mui-input-group">
				    <div class="mui-input-row">
				        <input id="phone_txt" type="text" class="mui-input-clear" placeholder="请输入手机号">
				        <span class="mobile_yy"></span>
				    </div>
				</div>	
			    <div class="money clearfix">
			    	<ul class="clearfix">
			    		<li rechargeAmount="10">10元</li>
			    		<li rechargeAmount="20">20元</li>
			    		<li rechargeAmount="30">30元</li>
			    		<li rechargeAmount="50">50元</li>
			    		<li rechargeAmount="100">100元</li>
			    		<li rechargeAmount="200">200元</li>
			    		<li rechargeAmount="300">300元</li>
			    		<li rechargeAmount="500">500元</li>
			    	</ul>
			    </div>
			    <div class=" mui-content-padded">
			    	<button id="pay_btn_disabled" class="mui-btn mui-btn-block disabled">立即充值</button>
			    	<button id="pay_btn" class="mui-btn mui-btn-block enabled" style="display: none;">立即充值</button>
			    </div>
			</div>
			
		</div>				
		<!-- 主体end -->	
	</body>
	<script src="../../../js/mui.min.js"></script><!-- mui -->
	<script src="../../../js/common.js"></script>
	<script src="../../../js/app.js"></script>
	<script src="../../../js/payment.js"></script>
	<script src="../../../js/jquery2.2.4.min.js"></script>
	<script type="text/javascript">
		
		mui.init();
		mui.plusReady(function(){
			
		});
		
		var isActive = false;
		var isMobile = false;
		var rechargeAmount = null;
		$(".money ul li").on('tap',function(){
			$(this).addClass('active').siblings('.money ul li').removeClass('active');
			isActive = true;
			rechargeAmount = this.getAttribute('rechargeAmount');
			enabledPaybtn();
		});
		
		document.getElementById("phone_txt").addEventListener('input',function(){
			isMobile = false;
			if(this.value.length == 11){
				utils.ajax('appHttpService/getPhoneInfo.do',function(data){
					var data = JSON.parse(data);
					if (data.state == '1') {
						var info = JSON.parse(data.result);
						if(info.errorCode){
							document.querySelector(".mobile_yy").innerText = '不存在的手机号码';
							return false;
						}
						var detail = '';
						var phoneInfo = info.phoneInfo;
						detail += phoneInfo.province + phoneInfo.city + phoneInfo.operator;
						document.querySelector(".mobile_yy").innerText = detail;
						isMobile = true;
					}
					enabledPaybtn();
				},{mobileNum:this.value});
			}else{
				document.querySelector(".mobile_yy").innerText = '';
				enabledPaybtn();
			}
		},false);
		
		//发起支付
		document.getElementById("pay_btn").addEventListener('tap',function(){
			utils.showWaiting();
			var param = {
				mobileNum:document.getElementById("phone_txt").value,
				rechargeAmount:rechargeAmount
			}
			utils.ajax('appHttpService/createPhoneBill.do',function(data){
				var data = JSON.parse(data);
				if (data.state == '1') {
					var billId = data.result;
					var subject = rechargeAmount + "元手机话费充值";
					var subdesc = appName + '-' + subject; 
					utils.closeWaiting();
					pay(rechargeAmount,subject,subdesc,billId,function(){
						plus.nativeUI.alert('话费充值成功!请注意查收运营商通知短信',function(){
						
						},'提示');
					});
				}else{
					utils.closeWaiting();
					mui.toast('抱歉，创建订单失败！');
				}
				
			},param);
		},false);
		
		/**
		 * 检查是否可以发起充值
		 * 条件：1、手机号正确；2、选择了任意面值
		 */
		function enabledPaybtn(){
			if(isActive&&isMobile){
				document.getElementById("pay_btn").style.display = 'block';
				document.getElementById("pay_btn_disabled").style.display = 'none';
			}else{
				document.getElementById("pay_btn").style.display = 'none';
				document.getElementById("pay_btn_disabled").style.display = 'block';
			}
		}
	</script>
</html>
